/** Funcion para hacer el grid **/
/*!
 * Ext JS Library 3.0+
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

var myData = new Array();

//function addToGrid(n,fecha,nombre,apellido,direccion,CP,telefono,email,empresa,rubro,materia,catedra,producto,area){
// 
//	myDatao[0] = [n,fecha,nombre,apellido,direccion,CP,telefono,email,empresa,rubro,materia,catedra,producto,area];
//
//    }

function addToGrid(cadena,iteracion){
//	myDatao[0] = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14'];
//	myDatao[1] = ['91','92','39','94','95','96','997','98','99','910','911','912','913','194'];
	myData[iteracion] = cadena;
}


Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // sample static data for the store
 //   var myData = new Array();
   // myData = myDatao;


    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
    
    

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'N'},
           {name: 'fecha'},
           {name: 'nombre'},
           {name: 'apellido'},
           {name: 'direccion'},
           {name: 'CP'},
           {name: 'telefono'},
           {name: 'email'},
           {name: 'empresa'},
           {name: 'rubro'},
           {name: 'materia'},
           {name: 'catedra'},
           {name: 'producto'},
           {name: 'area'}
           
        ]
    });

    // manually load local data
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'N',header: 'N', width: 15, sortable: true, dataIndex: 'N'},
            {header: 'fecha', width: 25, sortable: true, dataIndex: 'fecha'},
            {header: 'nombre', width: 25, sortable: true, renderer: change, dataIndex: 'nombre'},
            {header: 'apellido', width: 25, sortable: true, renderer: change, dataIndex: 'apellido'},
            {header: 'direccion', width: 25, sortable: true, renderer: change, dataIndex: 'direccion'},
            {header: 'CP', width: 25, sortable: true, renderer: change, dataIndex: 'CP'},
            {header: 'telefono', width: 25, sortable: true, renderer: change, dataIndex: 'telefono'},
            {header: 'email', width: 25, sortable: true, renderer: change, dataIndex: 'email'},
            {header: 'empresa', width: 25, sortable: true, renderer: change, dataIndex: 'empresa'},
            {header: 'rubro', width: 25, sortable: true, renderer: change, dataIndex: 'rubro'},
            {header: 'materia', width: 25, sortable: true, renderer: change, dataIndex: 'materia'},
            {header: 'catedra', width: 25, sortable: true, renderer: change, dataIndex: 'catedra'},
            {header: 'producto', width: 25, sortable: true, renderer: change, dataIndex: 'producto'},
            {header: 'area', width: 25, sortable: true, renderer: change, dataIndex: 'area'}
        ],
        stripeRows: true,
        //autoExpandColumn: 'N',
        height: 250,
        width: 800,
        title: 'Lista de consultas',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
    
    // render the grid to the specified div in the page
    grid.render('contenedor');
});